<script setup>
import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core'

const nodes = ref([
  {
    id: '1',
    data: { label: 'Node 1' },
    position: { x: 50, y: 50 },
  },
])

function logEvent(name, data) {
  console.log(name, data)
}
</script>

<template>
  <!-- bind listeners to the event handlers -->
  <div style="height: calc(100vh - 60px);">
    <VueFlow
      :nodes="nodes"
      @node-drag-start="logEvent('drag start', $event)"
      @node-drag="logEvent('drag', $event)"
      @node-drag-stop="logEvent('drag stop', $event)"
      @node-click="logEvent('click', $event)"
      @node-double-click="logEvent('dblclick', $event)"
      @node-contextmenu="logEvent('contextmenu', $event)"
      @node-mouse-enter="logEvent('mouseenter', $event)"
      @node-mouse-leave="logEvent('mouseleave', $event)"

    />
    <!--@node-mouse-move="logEvent('mousemove', $event)"-->
  </div>

</template>
